<!-- 首页模板 - 应用程序的主入口页面 -->
<template>
	<!-- 主容器：使用flex布局垂直居中显示内容 -->
	<view class="content">
		<!-- Logo图片：显示应用程序标识 -->
		<image class="logo" src="/static/logo.png"></image>
		
		<!-- 文本区域：显示应用标题 -->
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<!-- 按钮区域：包含页面导航和功能按钮 -->
		<view class="button-area">
			<!-- 导航按钮：跳转到页面B -->
			<button class="btn" @click="goToPageB">进入页面B</button>
			<!-- 功能按钮：查看当前页面源码 -->
			<button class="btn view-source-btn" @click="viewSource">查看源码</button>
		</view>
	</view>
</template>

<script>
	/**
	 * 首页组件
	 * 功能：作为应用程序的主入口，提供基本的导航和功能展示
	 * 特点：简洁的界面设计，包含Logo展示、标题显示和基础导航功能
	 */
	export default {
		/**
		 * 组件数据
		 * @returns {Object} 返回组件的响应式数据
		 */
		data() {
			return {
				// 页面标题文本
				title: 'Hello uni-app！'
			}
		},
		
		/**
		 * 页面加载完成时触发
		 * 可在此处进行页面初始化操作
		 */
		onLoad() {
			// 页面加载时的初始化逻辑（当前为空）
		},
		
		methods: {
			/**
			 * 跳转到页面B
			 * 使用uni.navigateTo进行页面跳转，保留当前页面在页面栈中
			 */
			goToPageB() {
				uni.navigateTo({
					url: '/pages/pageB/pageB'
				})
			},
			
			/**
			 * 查看当前页面源码
			 * 跳转到源码查看页面，并传递当前页面标识参数
			 */
			viewSource() {
				uni.navigateTo({
					url: '/pages/sourceView/sourceView?page=首页'
				})
			}
		}
	}
</script>

<style>
	/* 主容器样式 - 设置页面整体布局 */
	.content {
		display: flex;              /* 使用弹性布局 */
		flex-direction: column;     /* 垂直方向排列子元素 */
		align-items: center;        /* 水平居中对齐 */
		justify-content: center;    /* 垂直居中对齐 */
	}

	/* Logo图片样式 - 应用程序标识展示 */
	.logo {
		height: 200rpx;             /* 图片高度 */
		width: 200rpx;              /* 图片宽度 */
		margin-top: 200rpx;         /* 顶部外边距，控制Logo位置 */
		margin-left: auto;          /* 左侧自动外边距 */
		margin-right: auto;         /* 右侧自动外边距 */
		margin-bottom: 50rpx;       /* 底部外边距，与下方元素的间距 */
	}

	/* 文本区域样式 - 标题文本容器 */
	.text-area {
		display: flex;              /* 弹性布局 */
		justify-content: center;    /* 内容水平居中 */
	}

	/* 标题文本样式 - 主标题显示效果 */
	.title {
		font-size: 36rpx;           /* 字体大小 */
		color: #8f8f94;             /* 字体颜色（灰色调） */
	}

	/* 按钮区域样式 - 操作按钮容器 */
	.button-area {
		margin-top: 80rpx;          /* 顶部外边距，与上方元素的间距 */
		display: flex;              /* 弹性布局 */
		flex-direction: column;     /* 垂直方向排列按钮 */
		align-items: center;        /* 按钮水平居中 */
		gap: 20rpx;                 /* 按钮之间的间距 */
	}

	/* 通用按钮样式 - 基础按钮外观 */
	.btn {
		width: 400rpx;              /* 按钮宽度 */
		height: 80rpx;              /* 按钮高度 */
		background-color: #007aff;  /* 背景色（蓝色主题） */
		color: white;               /* 文字颜色 */
		border: none;               /* 无边框 */
		border-radius: 10rpx;       /* 圆角边框 */
	}
	
	/* 查看源码按钮样式 - 特殊功能按钮 */
	.view-source-btn {
		background-color: #34c759;  /* 绿色背景，区分功能类型 */
		width: 300rpx;              /* 较小的宽度 */
		height: 70rpx;              /* 较小的高度 */
		font-size: 32rpx;           /* 字体大小 */
	}

	/* 按钮激活状态样式 - 提供用户交互反馈 */
	.btn:active {
		opacity: 0.7;               /* 按下时降低透明度 */
	}
</style>
